<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<title>Demo</title>
		<script type="text/javascript">
			//<![CDATA[

			function init() {
				var filenames = [
					"Arcimboldo_Librarian_Stokholm.jpg",
					"DROID Small.JPG",
					"FirstDay.jpg",
					"keyboard.jpg",
					"mk_largerview_nek4k.jpg",
					"no-cell-phone-sign.jpg",
					"notes error.gif",
					"Openworld 503.jpg",
					"ptt_1229 verification.PNG",
					"Screenshot2.png",
					"Screenshot5.png",
					"senor alisha.JPG",
					"trees.jpg",
					"wait.gif"
				];

				for (var i = 0; i < filenames.length; ++i) {
					addImage(filenames[i]);
				}
			}

			function addImage(src) {
				var loadingImages = document.getElementById("loadingImages");
				var loadedImages = document.getElementById("loadedImages");
				var template = document.getElementById("template");

				var imgContainer = template.cloneNode(true);
				imgContainer.id = "";

				var img = imgContainer.getElementsByClassName("imgThumb")[0];

				imgContainer.Thumb = { 
					Height : imgContainer.getElementsByClassName("height")[0],
					Width: imgContainer.getElementsByClassName("width")[0]
				};
				
				img.onload = function(event) {
					var currentImage = event.target;
					var imageContainer = currentImage.parentNode;
					var insertBeforeImageContainer = null;

					imageContainer.style.display = "block";
					imageContainer.Thumb.Area =
						(imageContainer.Thumb.Width.textContent = currentImage.naturalWidth) *
						(imageContainer.Thumb.Height.textContent = currentImage.naturalHeight);

					for (var i = 0, nextImageContainer = loadedImages.childNodes[i]; i < loadedImages.childNodes.length; nextImageContainer = loadedImages.childNodes[++i]) {
						if (imageContainer.Thumb.Area <= nextImageContainer.Thumb.Area) {
							insertBeforeImageContainer = nextImageContainer;
							break;
						}
					}
					
					loadedImages.insertBefore(imageContainer, insertBeforeImageContainer);
				}

				img.src = src;
				loadingImages.appendChild(imgContainer);
			}

			//]]>
		</script>

		<style type="text/css">
			.img{display:none;float:left;padding:5px;color:#666;text-align:center;font-size:10pt;background:#333;-moz-border-radius:5px;border:solid 1px #666;margin:10px;}
			.img img{height:75px;}
			.loading{display:none;}

			body,html{margin:0;height:100%;width:100%;background:#1C1C1C;font-family:sans-serif;}
		</style>
	</head>
	<body onload="init();">
		<div id="template" class="img">
			<img class="imgThumb" />
			<br />
			<span class="width"></span> x <span class="height"></span>
		</div>

		<div class="thumbResults"  id="loadedImages"></div>
		<div class="loading"  id="loadingImages"></div>
	</body>
</html>